<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI图像转3D模型 - 弥勒佛像生成器</title>
    <link rel="stylesheet" href="css/ai-style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r158/three.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div id="container">
        <div id="header">
            <h1><i class="fas fa-magic"></i> AI图像转3D模型</h1>
            <p>上传弥勒佛像图片，AI智能生成3D模型</p>
        </div>

        <div id="upload-section">
            <div id="image-upload-area" class="upload-area">
                <i class="fas fa-cloud-upload-alt"></i>
                <h3>拖拽或点击上传图片</h3>
                <p>支持 JPG、PNG、WEBP 格式</p>
                <input type="file" id="image-input" accept="image/*" hidden>
                <button class="upload-btn" onclick="document.getElementById('image-input').click()">
                    选择图片
                </button>
            </div>
            
            <div id="image-preview" class="image-preview" style="display: none;">
                <img id="preview-image" alt="预览图片">
                <button id="remove-image" class="remove-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <div id="generation-section" style="display: none;">
            <div id="generation-progress">
                <h3>AI正在生成3D模型...</h3>
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill"></div>
                </div>
                <div class="progress-steps">
                    <div class="step active" id="step-1">
                        <i class="fas fa-eye"></i>
                        <span>图像分析</span>
                    </div>
                    <div class="step" id="step-2">
                        <i class="fas fa-cube"></i>
                        <span>3D建模</span>
                    </div>
                    <div class="step" id="step-3">
                        <i class="fas fa-palette"></i>
                        <span>纹理生成</span>
                    </div>
                    <div class="step" id="step-4">
                        <i class="fas fa-check"></i>
                        <span>完成</span>
                    </div>
                </div>
            </div>
        </div>

        <div id="result-section" style="display: none;">
            <div id="result-container">
                <div id="result-3d">
                    <canvas id="result-canvas"></canvas>
                    <div id="result-controls">
                        <button class="control-btn" onclick="resetView()">
                            <i class="fas fa-undo"></i> 重置视角
                        </button>
                        <button class="control-btn" onclick="toggleRotation()">
                            <i class="fas fa-play"></i> 暂停旋转
                        </button>
                        <button class="control-btn" onclick="downloadModel()">
                            <i class="fas fa-download"></i> 下载模型
                        </button>
                        <button class="control-btn" onclick="backToUpload()">
                            <i class="fas fa-upload"></i> 重新上传
                        </button>
                    </div>
                </div>
                <div id="result-info">
                    <h3>模型信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <label>顶点数：</label>
                            <span id="vertex-count">8,192</span>
                        </div>
                        <div class="info-item">
                            <label>面数：</label>
                            <span id="face-count">16,384</span>
                        </div>
                        <div class="info-item">
                            <label>纹理尺寸：</label>
                            <span id="texture-size">1024x1024</span>
                        </div>
                        <div class="info-item">
                            <label>文件大小：</label>
                            <span id="file-size">2.3 MB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/ai-3d-generator.js"></script>
</body>
</html>
